import React from 'react';
import Flex from 'antd-mobile/lib/flex';
import Button from 'antd-mobile/lib/button';

import 'antd-mobile/lib/button/style/index.css'
import 'antd-mobile/lib/flex/style/index.css'

import '../static/styles/user-info.css'
import '../static/icon/icon.css'

import { get } from  '../api/getData';

class UserInfo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user : {
                avatar : '',
                name : '吴辉',
                company: '长沙钦焰网络科技有限公司',
                job : '总经理',
                industry : '计算机软件',
                address : '湖南省长沙市',
                set_up_time : '今年成立',
                registered_capital : '200万人民币'
            },
            is_login_user : 0
        };
    }

    componentDidMount(){
        let __this = this;
        get('/home/memberInfo' , {mem_id : 4} , function (error , data) {
            console.log(data);
            if(error === null) {
                if (data.code === 1) {
                    __this.setState({
                        user: data.data,
                        is_login_user : data.is_login_user
                    });
                }
            }
        });
    }

    redirectChat(){
        window.location.href = '/chat/4';
    }

    render() {
        return (
            <div className="user-info-content">
                <Flex direction="column">
                    <Flex.Item style={{width:'100%','fontSize':'0'}}>
                        <img className="user-info-head-img" src={require('../static/imgs/header.jpg')} alt=""/>
                    </Flex.Item>
                    <Flex.Item className="user-info">
                        <Flex className="user-info-info" direction="column">
                            <Flex.Item>
                                <img className="user-info-head-logo" src={this.state.user.avatar} alt=""/>
                            </Flex.Item>
                            <Flex.Item className="user-info-name mb30">{this.state.user.name}</Flex.Item>
                            <Flex.Item className="user-info-abstract mb15">{this.state.user.company} | {this.state.user.job}</Flex.Item>
                            <Flex.Item className="user-info-abstract">{this.state.user.industry} | {this.state.user.address}</Flex.Item>
                        </Flex>
                    </Flex.Item>
                </Flex>
                <Flex direction="column" className="mt30 bf">
                    <Flex.Item className="user-info-title">名片信息</Flex.Item>
                    <Flex.Item className="user-info-contact" style={{width:'100%'}}>
                        <Flex direction="row" justify="flex-end" className="user-info-contact-content">
                            <Flex.Item className="user-info-contact-left">18874130125</Flex.Item>
                            <Flex.Item className="tr"><i className="iconfont icon-dianhua1"></i></Flex.Item>
                        </Flex>
                        <Flex direction="row" justify="flex-end" className="user-info-contact-content">
                            <Flex.Item className="user-info-contact-left">{this.state.user.company}</Flex.Item>
                            <Flex.Item className="tr"><i className="iconfont icon-4"></i></Flex.Item>
                        </Flex>
                    </Flex.Item>
                </Flex>
                <Flex direction="column">
                    <Flex.Item className="user-info-company mt30">
                        <Flex className="user-info-company-content" direction="column">
                            <Flex.Item className="user-info-title">企业背景</Flex.Item>
                            <Flex.Item className="user-info-company-name mb15">长沙钦焰网络科技有限公司</Flex.Item>
                            <Flex.Item className="user-info-company-info">
                                <div className="user-info-company-info-left"><i className="iconfont icon-shijian-copy"></i>今年成立 </div>
                                <div><i className="iconfont icon-meiyuan"></i>200万人民币</div>
                            </Flex.Item>
                            <Flex.Item className="user-info-company-more">
                                查看企业详情<i className="iconfont icon-more"></i>
                            </Flex.Item>
                        </Flex>
                    </Flex.Item>
                </Flex>

                {
                    this.state.is_login_user
                        ?
                    < div className="send-business-card-btn"><Button type="primary" onClick={this.redirectChat}>和他聊一聊</Button></div>
                        :
                    <div className="send-business-card-btn"><Button type="primary"><i className="iconfont icon-fenxiang business-card-share"></i>发名片</Button></div>
                }
            </div>
        );
    }
}

export default UserInfo;